<template>
	<view class="">
		<u-card margin="30rpx 0">
			<view class="df aic jcsb" slot="head">
				<view class="df aic">
					<view class="labelStyle">

					</view>
					<text class="headTitle fs28 ml15">商品信息</text>
				</view>
				<text class="c6 fs24">共
					<text class="fs24" style="color: #48A147;">{{orderInfo.goodsNum||0}}</text>
					种商品</text>
			</view>
			<!-- orderPayType    
1单支付订单   2合并 未支付订单   3合并 已支付订单 单订单  4合并 已支付订单 合并订单 -->
			<view class="" slot="body">
				<template v-if="orderPayType==1||orderPayType==3">
					<view slot="body" :class="['df border', { firstbox: index == 0 }]"
						v-for="(item, index) in orderInfo.shopPurOrderDetail" :key="index">
						<u-image border-radius="10" :src="item.image" width="120" height="120"></u-image>
						<view class="ml30" style="width: 500rpx">
							<view class="df jcsb">
								<text class="fs26 fwb">
									{{item.customGoodsName}}
								</text>
								<text class="priceStyle">
									<text class="fs24">￥</text> {{item.platformPrice||'待报价'}}</text>
							</view>
							<view class="df jcsb mt20">
								<view class="goodsLabel">
									{{item.specName}}
								</view>
								<text class="c3 fs24">×{{item.saleNum}}</text>
							</view>
							<u-button @click="handleSale(item)"
								v-if="item.afterTime&&orderInfo.auditStatus==30&&checkTime(item.afterTime)&&item.afterQuantity<=0&&item.initSaleNum>0"
								style="float: right;margin-bottom: 15rpx;"
								:custom-style="{fontSize: '26rpx', color: '#999999',width: '150rpx', height: '50rpx',background: '#fff',border: '#999'}"
								shape="circle" ripple size="mini">申请售后</u-button>
						</view>
					</view>
					<view class="df jcsb aic fs26 c3 " v-if="supplier.remark">
						<text class="c6 fwb">备注</text>
						<u-input disabled v-model="supplier.remark" placeholder="请输入备注" input-align="right"></u-input>
					</view>
				</template>
				<view class="" v-else>
					<view class="supplier-box"  v-for="supplier in orderInfo.supplierList">
						<view class="df  m20-0">
							<view class="c3 fwb fs28 " style="width: 420rpx;">
								{{supplier.supplierName||'宅美自营'}}
							</view>
							<view class="tag ml10" :class="supplier.isSelfSend==0?'tag-success':'tag-error'">
								{{supplier.isSelfSend==0?'平台配送':'商家配送'}}
							</view>
							<view class="app-theme auditStatus">
								{{supplier.auditStatusName||'--'}}
							</view>
						</view>
						<view :class="['df border', { firstbox: index == 0 }]"
							v-for="(item, index) in supplier.shopPurOrderDetail" :key="index">
							<!-- <image class="bdr10" :src="item.image" mode="widthFix" style="width: 120rpx;height: 120rpx;"></image> -->
							<u-image border-radius="10" :src="item.image" width="120" height="120"></u-image>
							<view class="ml30" style="width: 500rpx">
								<view class="df jcsb">
									<text class="fs26 fwb">
										{{item.customGoodsName}}
									</text>
									<text class="priceStyle">
										<text class="fs24">￥</text> {{item.platformPrice||'待报价'}}</text>
								</view>
								<view class="df jcsb mt20">
									<view class="goodsLabel">
										{{item.specName}}
									</view>
									<text class="c3 fs24">×{{item.saleNum}}</text>
								</view>
								<u-button @click="handleSale(item)"
									v-if="item.afterTime&&orderInfo.auditStatus==30&&checkTime(item.afterTime)&&item.afterQuantity<=0&&item.initSaleNum>0"
									style="float: right;margin-bottom: 15rpx;"
									:custom-style="{fontSize: '26rpx', color: '#999999',width: '150rpx', height: '50rpx',background: '#fff',border: '#999'}"
									shape="circle" ripple size="mini">申请售后</u-button>
							</view>
						</view>
						<view class="df jcsb aic fs26 c3 mt20" v-if="supplier.remark">
							<text class="c6 fwb">备注</text>
							<u-input height="40" disabled v-model="supplier.remark" placeholder="请输入备注"
								input-align="right"></u-input>
						</view>
						<view class="df aic jcfe mt20">
							<u-button class="ml16" @click="$emit('handlepayBtn',supplier.shopPurOrderId)" v-if="supplier.auditStatus == 20"
								:hair-line="false" :loading="loading"
								:custom-style="{fontSize: '24rpx', color: '#ffffff',width: '150rpx', height: '48rpx',background: '#47A848',border: '#47A848',margin:0}"
								shape='circle' ripple>确认收货</u-button>
						</view>
						<view class="" style="width: 710rpx;margin-left: -28rpx;">
							<u-line></u-line>
						</view>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		props: {
			orderInfo: {
				default: {
					shopPurOrderDetail: []
				},

			},
			orderPayType: '',
		},
		data() {
			return {
				list: [{}, {}],
				selectOpen: false,
				expandFlag: false,
			};
		},
		methods: {
			checkTime(e) {
				return !this.$moment(new Date()).isAfter(e, 'second')
			},
			handleOpen() {
				this.selectOpen = !this.selectOpen;
			},
			handleSale(e) {
				let info = encodeURIComponent(JSON.stringify(e))
				uni.redirectTo({
					url: '/pages/my/AddAfterSales?goods=' + info + '&shopId=' + this.orderInfo.shopId
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tag {
		font-size: 24rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding: 2rpx 10rpx;
		color: white;
		height: 100%;
	}

	.tag-success {
		background: #48A147;
	}

	.tag-error {
		background: #EF2929;
	}

	.firstbox {
		margin-top: 0 !important;
	}

	.border {
		padding: 20rpx 0;
		border-bottom: 2rpx dashed #E5E5E5;
	}

	.time-box {
		background: #47a848;
		border-radius: 16rpx;
		padding: 5rpx 16rpx;
		color: white;
	}

	.handle {
		margin-top: -14rpx;
		background-color: white;
		text-align: center;
		color: #004eff;

		&--select {
			transition: transform 0.4s;

			&--reverse {
				transform: rotate(-180deg);
			}
		}
	}

	.headTitle {
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.priceStyle {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ef2929;
	}

	.priceStyle_line {
		font-size: 22rpx;
		color: #666666;
		text-decoration: line-through;
	}

	.spuBox {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.type-status {
		font-size: 24rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: #2aad3e;
	}

	.zq {
		color: #004eff !important;
	}

	.labelStyle {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-radius: 22rpx;
	}
	.auditStatus{
		margin-left: auto;
	}
	.supplier-box{
		padding-bottom: 20rpx;
	}
</style>